<template>
  <view class="bottom-fixed flex-between">
    <view class="bottom-box">
      <view class="flex-column"  v-for="item in shopArr" :key="item.name" @click="toPath(item.path)">
        <image :src="item.icon" class="b-icon"/>
        <view class="u-f-sx">{{item.name}}</view>
      </view>
    </view>
    <view class="btn-group">
      <view>加入购物车</view>
      <view>立即购买</view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import {reactive} from 'vue'
import {toPath} from "@/util/router/router";

const shopArr = reactive([
  {
    name:'店铺',
    icon:'/static/icon/cart/dianpu.png',
    path:'/shop/store/index',
  },
  {
    name:'收藏',
    icon:'/static/icon/cart/shoucang.png',
    path:'/shop/index/index',
  },
  {
    name:'客服',
    icon:'/static/icon/cart/kefu.png',
    path:'/shop/index/index',
  },
])


</script>

<style scoped lang="scss">
@import "@/static/css/index.css";

.bottom-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
  text-align: center;
}

.btn-group {
  flex: 1;
  margin-left: 30rpx;
  display: flex;
  justify-content: space-around;
  color: #fff;

  &>view{
    text-align: center;
  }

  &>view:nth-child(1){
    padding: 20rpx 0;
    width: 50%;
    background: linear-gradient(-60deg, #ffc900 0%, #ff9602 100%);
    border-top-left-radius: 10rpx;
    border-bottom-left-radius: 10rpx;
    &:active{
      background: linear-gradient(-60deg, #f3c001 0%, #e78803 100%);
    }
  }

  &>view:nth-child(2){
    padding: 20rpx 0;
    background: linear-gradient(-60deg, #fe7503 0%, #fd4b03 100%);
    width: 50%;
    border-top-right-radius: 10rpx;
    border-bottom-right-radius: 10rpx;

    &:active{
      background: linear-gradient(-60deg, #e86b03 0%, #e74402 100%);
    }
  }
}

.b-icon {
  width: 40rpx;
  height: 40rpx;
}

</style>